@charset "UTF-8";

//图片滤镜，黑白：0.5  放大：img-filter(1,1.05);
/// 图片滤镜
/// @param {Number} $filter - 亮度
/// @param {String} $transform - 缩放
/// @example scss - img-filter function
/// img-filter(1,1.05);
/// // 图片放大，常用于鼠标悬浮图片变大
/// //-webkit-filter: brightness(1);
/// //filter: brightness(1);
/// //-moz-transform: scale(1.05);
/// //-webkit-transform: scale(1.05);
@mixin img-filter($filter,$transform){
    -webkit-filter: brightness($filter);/*.5*/
    filter: brightness($filter);
    -moz-transform: scale($transform);
    -webkit-transform: scale($transform);/*1.05*/
}

/// 行内块
/// @example scss - inline-block-align-top function
@mixin inline-block-align-top{
    display: inline-block;
    *zoom:1;
    *display:inline;
    vertical-align:top
}

/// 超长文字的省略号
/// @example scss - text-overflow function
@mixin text-overflow {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

/// 圆角边框
/// @param {String} $radius - 圆角像素
/// @example scss - radius function
/// radius(4px);
/// // border-radius: 4px;
/// // -webkit-border-radius: 4px;
/// // -moz-border-radius: 4px;
/// // -o-border-radius: 4px;
/// // -ms-border-radius: 4px;
@mixin radius($radius){
    border-radius: $radius;
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -o-border-radius: $radius;
    -ms-border-radius: $radius;
}

/// 居中
/// @param {String} $w - 宽度
/// @param {String} $h - 高度
/// @example scss - center function
/// center(100px,50px);
/// // position: absolute;
/// // top: 50%;
/// // left: 50%;
/// // margin-left: 50px;
/// // margin-top: 25px;
/// // width: 100px;
/// // height: 50px;
@mixin center($w,$h){
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -$w/2;
    margin-top: -$h/2;
    width: $w;
    height: $h;
}

/// 阴影
/// @param {String} $1 - 水平阴影的位置
/// @param {String} $2 - 垂直阴影的位置
/// @param {String} $3 - 模糊距离
/// @param {String} $4 - 颜色
/// @example scss - box-shadow function
/// box-shadow(0,1px,2px,rgba(0,0,0,.3));
/// // box-shadow:0 1px 2px rgba(0,0,0,.3);
/// // -webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);
/// // -moz-box-shadow:0 1px 2px rgba(0,0,0,.3);
/// // -ms-box-shadow:0 1px 2px rgba(0,0,0,.3);
/// // -o-box-shadow:0 1px 2px rgba(0,0,0,.3);
@mixin box-shadow($x1,$x2,$x3,$x4){
    box-shadow: $x1 $x2 $x3 $x4;
    -webkit-box-shadow: $x1 $x2 $x3 $x4;
    -moz-box-shadow: $x1 $x2 $x3 $x4;
    -ms-box-shadow: $x1 $x2 $x3 $x4;
    -o-box-shadow: $x1 $x2 $x3 $x4;
}
